<ng-container *ngIf="!lvInline">
  <div
    lv-internal-select-trigger
    [lvDisabled]="lvDisabled"
    [lvLoading]="lvLoading"
    [lvPlaceholder]="lvPlaceholder"
    [value]="value"
    [lvMode]="lvMode"
    [lvShowClear]="lvShowClear"
    [lvMaxTagCount]="lvMaxTagCount"
    [lvMaxTagRow]="lvMaxTagRow"
    [lvSize]="lvSize"
    [selectOpen]="selectOpen"
    [lvSimple]="lvSimple"
    [customTrigger]="customTrigger ? customTriggerTpl : null"
    (removeChange)="removeSelectedItem($event)"
    (clearChange)="clearSelected($event)"
    (onFoldSelectionChange)="_overlayUpdatePostion()"
    (keydown)="onKeyDown($event)"
  ></div>
</ng-container>
<ng-container *ngIf="lvInline" [ngTemplateOutlet]="selectionPanelTpl"></ng-container>

<!-- 自定义选中样式 -->
<ng-template #customTriggerTpl>
  <ng-content select="lv-select-trigger"></ng-content>
</ng-template>

<!--
    overlay
    selection panel template
    header[custom + search + checkall] + content + footer
-->
<ng-template #selectionPanelTpl>
  <div
    class="lv-select-panel lv-select-panel-width"
    [ngClass]="lvPanelClass"
    [class.lv-select-panel-small]="lvSize === 'small'"
    [class.lv-select-panel-default]="lvSize === 'default'"
    [class.lv-select-panel-large]="lvSize === 'large'"
    [@showItem]="animationState"
    (@showItem.done)="onAnimationDone($event)"
    (keydown)="onKeyDown($event)"
    tabindex="-1"
  >
    <!-- header -->
    <div #selectPanelHeader class="lv-select-panel-header" (click)="stopPropagation($event)">
      <!-- custom -->
      <ng-content select="lv-select-header"></ng-content>

      <!-- search -->
      <div class="lv-select-panel-search" *ngIf="lvShowFilter">
        <lv-search
          [lvType]="'inner'"
          [lvPlaceHolder]="lvFilterPlaceholder"
          [lvLoading]="searchLoading"
          [lvFocus]="lvFilterFocus"
          [(ngModel)]="filterValue"
          (ngModelChange)="searchChange($event)"
        ></lv-search>
      </div>

      <!-- 全选 -->
      <ng-container *ngIf="multiple && lvShowCheckAll && hasOptions && renderOptions?.length">
        <div class="lv-option lv-select-panel-origin lv-option-multiple" (click)="toggleCheckAll()">
          <label
            lv-checkbox
            [ngModel]="isAllCheck"
            class="lv-option-checkbox"
            [lvIndeterminate]="isHalfCheck"
            lvControl
          ></label>
          <div class="lv-option-container">
            <span class="lv-subselect-trigger">{{ 'all' | i18n }}</span>
          </div>
        </div>
      </ng-container>
    </div>

    <!-- content -->
    <div #selectPanelContent class="lv-select-panel-content" [style.maxHeight]="scrollY">
      <!-- 数据为空 -->
      <div class="lv-select-selection-null" (click)="stopPropagation($event)" *ngIf="!renderOptions?.length">
        <lv-empty [lvImage]="null"></lv-empty>
      </div>

      <!-- 数据列表 -->
      <ng-container *ngIf="!lvVirtualScroll; else scrollViewTpl">
        <ng-container *ngFor="let item of renderOptions; let i = index; trackBy: lvTrackBy">
          <ng-container *ngTemplateOutlet="contentItemTpl; context: { $implicit: item, index: i }"></ng-container>
        </ng-container>
      </ng-container>
    </div>

    <!-- footer -->
    <div #selectPanelFooter class="lv-select-panel-footer" (click)="stopPropagation($event)">
      <ng-content select="lv-select-footer"></ng-content>
      <div class="lv-select-show-add-option" *ngIf="lvShowAddOption">
        <button lv-button lvType="link" *ngIf="!adding; else addingTpl" (click)="openAdding()">
          <div class="lv-select-add-option-box">
            <i lv-icon="lv-icon-create"></i>
            <span>{{ 'addOptions' | i18n }}</span>
          </div>
        </button>
        <ng-template #addingTpl>
          <input lv-input [disabled]="addLoading" [(ngModel)]="addingInputValue" />
          <div class="lv-select-add-option-btn-container">
            <button
              lv-button
              lvSize="small"
              [lvLoading]="addLoading"
              *ngFor="let item of addOptionButtons; let i = index"
              [lvType]="i === addOptionButtons.length - 1 ? 'primary' : 'default'"
              (click)="item.onClick()"
            >
              {{ item.label | i18n }}
            </button>
          </div>
        </ng-template>
      </div>
    </div>
  </div>
</ng-template>

<!-- 内容区 item template -->
<ng-template
  #contentItemTpl
  let-item
  let-index="index"
  let-count="count"
  let-even="even"
  let-odd="odd"
  let-first="first"
  let-last="last"
>
  <lv-subselect
    [lvData]="item"
    [lvSize]="lvSize"
    [lvContentTemplate]="lvContentTemplate"
    [lvIndex]="index"
    [lastVirtualScrollHoveredIndex]="lastVirtualScrollHoveredIndex"
    [lvScroll]="lvScroll"
    [lvHighlightContent]="filterValue"
    [lvVirtualItemSize]="lvVirtualItemSize"
    [lvVirtualMaxBuffer]="lvVirtualMaxBuffer"
    [lvVirtualMinBuffer]="lvVirtualMinBuffer"
    (lvSelectedChange)="itemSeletedChange($event)"
    #subSelect
  ></lv-subselect>
</ng-template>

<!-- TODO:虚拟滚动 -->
<ng-template #scrollViewTpl>
  <ng-container *ngIf="renderOptions?.length">
    <cdk-virtual-scroll-viewport
      class="lv-virtual-panel-content"
      [itemSize]="lvVirtualItemSize"
      [maxBufferPx]="lvVirtualMaxBuffer"
      [minBufferPx]="lvVirtualMinBuffer"
      [style.height]="virtualScrollY"
      (scrolledIndexChange)="scrolledIndexChange($event)"
      #scrollComponent
    >
      <!-- 控制子元素实例化 -->
      <ng-container
        *cdkVirtualFor="
          let item of renderOptions;
          let index = index;
          let count = count;
          let even = even;
          let first = first;
          let last = last;
          let odd = odd;
          trackBy: lvTrackBy;
          templateCacheSize: 0
        "
      >
        <ng-container
          *ngTemplateOutlet="
            contentItemTpl;
            context: { $implicit: item, index: index, count: count, even: even, first: first, last: last, odd: odd }
          "
        ></ng-container>
      </ng-container>
    </cdk-virtual-scroll-viewport>
  </ng-container>
</ng-template>
